<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ好友列表练习</title>
    <style>
        body,h3,ul{
            margin:0; padding:0;
        }
        li {
            list-style:none;
        }
        .box{
            margin: 0px auto;
            width: 260px;
            border: 1px solid #333;
        }
        /*---三角---*/
        .triangle_up, .triangle_down_red, .triangle_down_gray {
            position:absolute;
            width:0;
            height:0;
            overflow:hidden;
            border-left:4px solid transparent;
            border-right:4px solid transparent;
        }
        .triangle_up {
            border-bottom:4px solid #ca0309;
        }
        .triangle_down_red {
            border-top:4px solid #ca0309;
        }
        .triangle_down_gray {
            border-top:4px solid #c4bdbd;
        }
        .triangle_left_gray{
            position:absolute;
            width:0;
            height:0;
            overflow:hidden;
            border-top:4px solid transparent;
            border-bottom:4px solid transparent;
            border-left:4px solid #c4bdbd;
        }

        h3{
            position: relative;
            height: 30px;
            width: 260px;
            line-height: 30px;
            text-indent: 18px;
            font-size: 16px;
            font-weight: normal;
            background: greenyellow;
        }
        h3 a{
            top:13px ;
            left: 5px;
        }
        #list li{
            cursor: pointer;
        }
        #list ul li{
            width: 258px;
            height: 20px;
            line-height: 20px;
            text-indent: 18px;
            border: 1px solid #333;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var than=null;
            var liArr=[];
            var oUl=document.getElementById("list");
            var oA=oUl.getElementsByTagName("a");
            var oUl_1=oUl.getElementsByTagName("ul");
            var oh3=oUl.getElementsByTagName("h3");
            for(var i=0;i<oh3.length;i++){
                oh3[i].index=i;
                oh3[i].onclick=function(){
                    if(than!=null){
                        if(oUl_1[this.index]!=than){
                            var tLi= than.getElementsByTagName("li");
                            var tA= than.parentNode.getElementsByTagName("a")[0];
                            tA.className="triangle_left_gray";
                            for(var i=0;i<tLi.length;i++){
                                tLi[i].style.display='none';
                            }
                        }
                    }
                    var aLi=oUl_1[this.index].getElementsByTagName("li");
                    var aA=oA[this.index];

                    if(aA.className=="triangle_left_gray"){
                        aA.className="triangle_down_gray";
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].style.display='block';
                        }
                    }else{
                        aA.className="triangle_left_gray";
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].style.display='none';
                        }
                    }
                    than=oUl_1[this.index];
                }
            }
            for(var i=0;i<oUl_1.length;i++){//获取ul li 下面所有的li
                var aLi=oUl_1[i].getElementsByTagName("li");
                for(var j=0;j<aLi.length;j++){
                    liArr.push(aLi[j]);
                }
            }
            var thanLi=null;
            for(var i=0;i<liArr.length;i++){
                liArr[i].onclick=function(){
                    if(thanLi!=null){
                        thanLi.style.background='none';
                    }
                    this.style.background='red';
                    thanLi=this;
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <ul id="list">
            <li>
                <h3><a href="#" class="triangle_left_gray"></a>我的好友</h3>
                <ul>
                    <li>11111</li>
                    <li>22222</li>
                    <li>33333</li>
                </ul>
            </li>
            <li>
                <h3> <a href="#" class="triangle_left_gray"></a>企业好友</h3>
                <ul>
                    <li>q1111</li>
                    <li>q2222</li>
                    <li>q3333</li>
                    <li>q4444</li>
                    <li>q5555</li>
                </ul>
            </li>
            <li>
                <h3> <a href="#" class="triangle_left_gray"></a>黑名单</h3>
                <ul>
                    <li>h1111</li>
                    <li>h2222</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>